import React, { Component } from 'react';
/*
  学习目标：Route组件的说明

*/

import './index.css';

import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom';

export default class App extends Component {
  render() {
    return (
      <Router>
        <NavLink to="/home" activeClassName="xxx-xx-active" exact>
          点我跳到home
        </NavLink>
        <br />
        <NavLink to="/my" activeClassName="xxx-xx-active">
          点我跳到my
        </NavLink>
        <br />
        <Link to="/friend">点我跳到friend</Link>

        {/* Route组件 */}
        {/* 1. Route相当于 规则对象 和 挂载点 二合一 */}
        {/* 2. 匹配不上的话，Route内部的render返回null， 匹配上render渲染component */}
        <Route path="/my" component={My}></Route>

        {/* 3. Route匹配所有路由的两种写法 */}
        {/* 3.1 不写path，表示匹配任意路径 */}
        {/* <Route component={Home}></Route> */}
        {/* 3.2 path写一个"/"，任意路径都可以匹配到 */}
        {/* <Route path="/" component={Home}></Route> */}
        {/* 4. Route组件可以有eaxct属性，表示精准匹配 */}
        <Route path="/friend" component={Friend} exact></Route>
        {/* 注意：exact在path有值时，才生效,表示精准匹配。不写path，exact无效 */}
        <Route component={Friend} exact></Route>
        {/* 5.React中Route默认是从上往下依次匹配，匹配成功之后不会停 */}
        <Route path="/my" component={My}></Route>
        <Route path="/my" component={My}></Route>
        <Route path="/my" component={My}></Route>
      </Router>
    );
  }
}

function Home() {
  return <h1>我是Home组件</h1>;
}

function My() {
  return <h1>我是Find组件</h1>;
}
function Friend() {
  return <h1>我是Friend组件</h1>;
}
